<template>
  <div class="wekgo">
     <div class="recoment-title">周末去哪玩</div>
     <ul>
         <li class="item border-bottom" v-for="item of weekendList" :key="item.id">
             <div class="item-img-wrapper">
                 <img class="item-img" :src="item.recomImg" >
             </div>
             <div class="item-info">
                 <p class="item-title">{{item.title}}</p>
                 <p class="item-appraise">{{item.appraise}}</p>
             </div>
         </li>
     </ul>
  </div>
</template>

<script>
export default {
  name: 'Weekend',
  props: {
    weekendList: Array
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/varibles.styl'
@import '~style/mixins.styl'
.wekgo
  border-bottom .04rem solid #cacaca
  padding-bottom .2rem
  .recoment-title
    line-height .8rem
    text-indent .2rem
    background #eee
  .item-img-wrapper
    height 0
    padding .1rem
    padding-bottom 33.9%
    overflow hidden
    .item-img
      width 100%
  .item-info
    padding-left .2rem
    padding-top .2rem
    min-width 0
    .item-title
      color #212121
      font-size .32rem
      line-height: 0.44rem
      padding-bottom .18rem
      elllipsis()
    .item-appraise
      font-size .24rem
      padding-bottom .1rem
      color #616161
      line-height .34rem
      elllipsis()
</style>
